<template>
    <div>
        <el-card shadow style="height: 548px;width: 100%;overflow:hidden">
            <div class="department-outer">
                <div class="tip-box" style="top:80px">
                    <b style="margin-right: 20px;cursor:pointer;" @click="glBack">返回</b>
                </div>
                <div class="zoom-box">
                    <zoom-controller v-model="zoom" :min="20" :max="200"></zoom-controller>
                </div>
                <div class="view-box">
                    <org-view
                            v-if="data"
                            :data="data"
                            :zoom-handled="zoomHandled"
                            @on-menu-click="handleMenuClick"
                            @showdetail="showdetail"
                            @innext="inNext"
                    ></org-view>
                </div>
            </div>
        </el-card>
        <gride :gride-data="grideData" :show="modelShow" v-on:showgrid="showgrid"
               v-on:getpoint="getpoint" @close="grideClose"></gride>
    </div>
</template>

<script>
	import OrgView from './components/org-view.vue'
	import ZoomController from './components/zoom-controller.vue'
	import Gride from './components/grid.vue'
	import './index.less'

	const menuDic = {
		edit: '编辑部门',
		detail: '查看部门',
		new: '新增子部门',
		delete: '删除部门'
	}
	export default {
		name: 'overview',
		data () {
			return {
				data: null,
				resultData: null,
				zoom: 100,
				treedata: [],
				grideData: {},
				modelShow: false,
                arrGl:[]
			}
		},
		props: {run:false},
		components: {
			OrgView,
			ZoomController,
			Gride
		},
		computed: {
			zoomHandled () {
				return this.zoom / 100
			}
		},
		methods: {
			init () {
				this.$http({
					fun: 'overviewList',
					cb: res => {
						const result = this.$util.transData(res, 'id', 'parent_id', 'children');
						console.log('组装后的数据', result);
						this.resultData = result[0]
						this.data = result[0]
						this.selectIdData('5937232f-50f3-11e9-b3be-0242ac11001d')
					}
				});
			},
			inNext (data) {
                let result = this.$util.transTreeByIdData(this.resultData,data.id)
                this.data = this.$util.transTreeData(result, 1, 4)
                let arr = this.arrGl
                 arr.push(this.data)
                 this.arrGl = arr
			},
            glBack(){
				let data = this.arrGl
                let count = data.length
				console.log('执行返回操作',data,count)
                if(count-1 > 0){
                    this.data = data[count-2]
                    data.pop()
                    this.arrGl = data
                }else{
                  this.data = data[0]
                }
            },
			selectIdData (id) {
				let data = this.resultData
				let result = this.$util.transTreeData(data, 1, 4)
				this.data = result
                this.arrGl[0] = result
			},
			grideClose () {
				this.modelShow = false
			},
			showdetail (data) {
				this.modelShow = true
				this.grideData = data
			},
			setDepartmentData (data) {
				data.isRoot = true
				return data
			},
			handleMenuClick ({ data, key }) {
				this.$Message.success({
					duration: 5,
					content: `点击了《${data.label}》节点的'${menuDic[key]}'菜单`
				})
			},
			showgrid () {

			},
			getpoint () {

			},
			getDepartmentData () {
				this.data = {
					id: 0,
					label: 'XXX科技有限公司',
					children: [
						{
							id: 2,
							label: '产品研发部',
							children: [
								{
									id: 5,
									label: '研发-前端'
								}, {
									id: 6,
									label: '研发-后端'
								}, {
									id: 9,
									label: 'UI设计'
								}, {
									id: 10,
									label: '产品经理'
								}
							]
						},
						{
							id: 3,
							label: '销售部',
							children: [
								{
									id: 7,
									label: '销售一部'
								}, {
									id: 8,
									label: '销售二部'
								}
							]
						},
						{
							id: 4,
							label: '财务部'
						}, {
							id: 11,
							label: 'HR人事'
						}
					]
				}

			}
		},

		watch: {},

		mounted () {
			this.init();
//        this.getDepartmentData()
		},

	}
</script>

<style scoped>
    .lyx-right-penal {
        border: 1px solid #313131;
        right: 0px;
        z-index: 200;
        width: 400px;
        height: 400px;
        position: absolute;
        background-color: white;
        top: 19%;
    }
</style>
